<h1>{{ resource_allowed_project_title }}</h1>
<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">
                <i class="fa fa-archive tlp-pane-title-icon"></i> {{ resource_allowed_project_subtitle }}
            </h1>
        </div>
        <section class="tlp-pane-section">
            <p class="tlp-alert-warning">{{ information }}</p>

            {{# allow_all_enabled }}
                <form id="allowed-projects-all-form" action="{{ restricted_resource_action }}" method="POST">
                    {{# restricted_resource_action_csrf }}
                        {{> csrf_token_input }}
                    {{/ restricted_resource_action_csrf }}

                    <div class="tlp-form-element">
                        <label class="tlp-label" for="allowed-projects-all-allowed">{{ resource_allowed_project_allow_all }}</label>
                        <div class="tlp-switch">
                            <input type="checkbox"
                                   id="allowed-projects-all-allowed"
                                   data-form-id="allowed-projects-all-form"
                                   class="tlp-switch-checkbox"
                                   name="all-allowed"
                                   value="1"
                                   {{^ is_resource_restricted }}checked{{/ is_resource_restricted }}
                                   {{# can_be_unrestricited }}disabled{{/ can_be_unrestricited}}
                            >
                            <label for="allowed-projects-all-allowed" class="tlp-switch-button" aria-hidden>{{ resource_allowed_project_allow_all }}</label>
                        </div>
                    </div>
                </form>

                {{# is_resource_restricted }}
                    <h2 class="tlp-pane-subtitle resource-restrictor-subtitle">{{ resource_allowed_project_list }}</h2>
                {{/ is_resource_restricted }}

            {{/ allow_all_enabled }}

            {{# is_resource_restricted }}
                <div id="allowed-projects-list">
                    <form id="projects-allowed-form" action="{{ update_allowed_projects_action }}" method="POST">
                        <div class="tlp-table-actions" id="allowed-projects-list-actions">
                            {{# update_allowed_projects_action_csrf }}
                                {{> csrf_token_input }}
                            {{/ update_allowed_projects_action_csrf }}


                            <div id="project-to-allow-autocompleter" class="tlp-form-element-append tlp-table-actions-element">
                                <select class="tlp-select" id="project-to-allow" name="project-to-allow" style="width: 100%" data-placeholder="{{ resource_allowed_project_list_allow_placeholder }}"></select>
                                <button type="submit" name="allow-project" class="tlp-append tlp-button-primary"
                                        value="1">
                                    <i class="fa fa-arrow-circle-o-right tlp-button-icon"></i> {{ resource_allowed_project_list_allow_project }}
                                </button>
                            </div>
                            <div class="tlp-table-actions-spacer"></div>
                            <div class="tlp-form-element {{# there_is_no_project }}tlp-form-element-disabled{{/ there_is_no_project }}">
                                <input type="search"
                                    id="filter-projects"
                                    data-target-table-id="allowed-projects-list"
                                    autocomplete="off"
                                    class="tlp-search"
                                    size="28"
                                    placeholder="{{ resource_allowed_project_list_filter_placeholder }}"
                                    {{# there_is_no_project }}disabled{{/ there_is_no_project }}
                                >
                            </div>
                        </div>

                        <table class="tlp-table" id="allowed-projects-list">
                            <thead>
                                <tr>
                                    <th class="tlp-table-cell-numeric">{{ resource_allowed_project_list_id }}</th>
                                    <th class="resource-restrictor-cell-project-name">{{ resource_allowed_project_list_name }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            {{# there_is_no_project }}
                                <tr>
                                    <td colspan="2" class="tlp-table-cell-empty">{{ resource_allowed_project_list_empty }}</td>
                                </tr>
                            {{/ there_is_no_project }}
                            {{^ there_is_no_project }}
                                <tr class="tlp-table-empty-filter">
                                    <td colspan="2" class="tlp-table-cell-empty">{{ resource_allowed_project_filter_empty }}</td>
                                </tr>
                                {{# allowed_projects }}
                                    <tr>
                                        <td class="tlp-table-cell-numeric tlp-table-cell-filterable">
                                            {{ getId }}
                                        </td>
                                        <td class="resource-restrictor-cell-project-name tlp-table-cell-filterable">
                                            <a href="{{ url_project }}/{{ getUnixNameMixedCase }}">{{ getUnconvertedPublicName }}</a>
                                        </td>
                                    </tr>
                                {{/ allowed_projects }}
                            {{/ there_is_no_project }}
                            </tbody>
                        </table>
                    </form>
                </div>
            {{/ is_resource_restricted }}
        </section>
    </div>
</section>
